<template>
  <div>
    <!--提示框-->
    <el-dialog :visible.sync="isShow" :before-close="popBeforeClose" title="识别本地图片文字" width="800px">
      <div>
        <div v-if="identifyArr.length">
          <p v-for="(v, k) in identifyArr" :key="k">{{ v.words }}</p>
        </div>
        <up-image v-else ref="W_UP_IMAGE" @upFinish="imageUpFinish"/>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="popBeforeClose">取 消</el-button>
        <el-button
          v-if="identifyArr.length > 0 || fileList > 0 || upImageSrc"
          type="danger"
          size="mini"
          @click="clearData"
        >清 除</el-button>
        <el-button
          v-if="!identifyArr.length"
          :disabled="!upImageSrc"
          :loading="isIddentify"
          type="primary"
          size="mini"
          @click="imageInentifyBtnClick"
        >{{ isIddentify ? '识别中...' : '识 别' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import API from "@/api/apis";
import UpImage from "../../components/upImage.vue";
import { get } from "@/api/ajax";
import Config from "@/config/index";
import { Component, Vue, Prop } from "vue-property-decorator";
import WPopView from '@/utils/popView'

interface IdentifyTextType {
  words: string;
}

@Component({
  components: {
    UpImage
  }
})
export default class WebToolImageIdentifyTextLoacl extends Vue {
  @Prop({ default: false }) isShow!: Boolean;

  // 识别出的文字
  private identifyArr: IdentifyTextType[] = [];
  // 上传文件图片路径
  upImageSrc: string = "";
  // 文件列表
  fileList: File[] = [];
  // 是否正在识别
  isIddentify: Boolean = false;

  // 弹窗关闭前的调用
  popBeforeClose() {
    this.isIddentify = false;
    this.hidenView();
  }
  // 清除数据
  clearData() {
    (this.$refs["W_UP_IMAGE"] as any).clearFile();
    this.upImageSrc = "";
    this.identifyArr = [];
  }
  // 图片识别按钮点击
  imageInentifyBtnClick() {
    // 标记正在识别
    this.isIddentify = true;
    get(API.baidu.localTextIdentify, {
      fileUrl: this.upImageSrc
    })
      .then((data: any) => {
        this.isIddentify = false;
        if (data && data.length > 0) {
          this.identifyArr = data;
        } else {
          WPopView.msgError("没有识别出文字");
        }
      })
      .catch(() => {
        this.isIddentify = false;
        this.identifyArr = [];
      });
  }
  // 图片上传成功后调用
  imageUpFinish(url: string) {
    this.upImageSrc = url;
  }
  // 隐藏试图
  hidenView() {
    this.$emit("hidenFunc", 0);
  }
}
</script>

<style scoped>
</style>
